﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频点播系统 - 视频详情</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <!-- 自定义样式 -->
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #4e4e4e;
            color: #f0f2f5;
            margin: 0;
            padding: 0;
        }

        /* 导航栏样式 */
       .navbar {
            background-color: #2c3e50;
            color: white;
            padding: 15px 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

       .access-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin-left: 15px;
            text-decoration: none;
        }

       .access-btn:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }

        /* 单视频页面样式 */
       .standard-bg {
            background-color: #4e4e4e;
            padding: 60px 0;
        }

       .header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 30px;
            padding: 0 30px;
        }

       .video-embed-box {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
            transition: box-shadow 0.3s ease;
            width: 100%;
            height: 600px;
        }

       .video-embed-box:hover {
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.3);
        }

       .video-content {
            margin-top: 30px;
            background-color: #2c3e50;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        }

       .video-content h2 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #3498db;
        }

        /* 模态框样式 */
       .modal-content {
            border-radius: 20px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        }

       .custom-modal-header {
            background-color: #2c3e50;
            color: white;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            padding: 25px;
        }

       .modal-body form {
            padding: 30px;
        }

       .modal-body label {
            display: block;
            font-size: 18px;
            margin-bottom: 8px;
            color: #3498db;
        }

       .modal-body input[type="text"] {
            width: 100%;
            padding: 15px;
            margin-bottom: 25px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

       .modal-body input[type="text"]:focus {
            border-color: #3498db;
            outline: none;
        }

       .subscribe-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            font-size: 18px;
        }

       .subscribe-btn:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }

        [v-cloak] {
            display: none;
        }

        /* 新增的一些细节样式 */
       .video-embed-box iframe {
            width: 100%;
            height: 100%;
        }

       .header-top div {
            display: flex;
            align-items: center;
        }

       .header-top button {
            margin-left: 20px;
        }

        /* 收藏和点赞样式 */
       .like-favorite-box {
            text-align: right;
            margin-top: 10px;
        }

       .like-favorite-box i {
            margin-left: 10px;
        }

        /* 评论模块样式 */
       .comment-section {
            margin-top: 30px;
            background-color: #2c3e50;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
        }

       .comment-section h2 {
            font-size: 28px;
            margin-bottom: 15px;
            color: #3498db;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

       .comment-section h2 span {
            display: block;
        }

       .comment-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 15px;
            flex-grow: 1;
        }

       .comment-input {
            width: 100%;
            padding: 12px 40px 12px 15px;
            border: 2px solid #3498db;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.1);
            color: #f0f2f5;
            font-size: 16px;
            transition: border-color 0.3s ease;
        }

       .comment-input:focus {
            border-color: #2980b9;
            outline: none;
            box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
        }

       .comment-btn {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            margin-left: 15px;
            font-size: 16px;
        }

       .comment-btn:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }
    </style>
</head>

<body>
    <div id="myapp">
        <!-- SINGLE VIDEO -->
        <div id="single-video" class="container-fluid standard-bg">
            <!-- HEADER -->
            <div class="row header-top">
                <div class="col-lg-3 col-md-6 col-sm-5">
                    <a href="/list.html" class="access-btn">返回视频列表</a>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-7 hidden-xs">
                    <div class="right-box">
                        <button type="button" class="access-btn" v-on:click="delete_video()">视频删除</button>
                        <button type="button" class="access-btn" data-bs-toggle="modal" data-bs-target="#enquirypopup">
                            视频修改
                        </button>
                    </div>
                </div>
            </div>
            <!-- SINGLE VIDEO -->
            <div class="row">
                <!-- SINGLE VIDEO -->
                <div id="single-video-wrapper" class="col-lg-10 col-md-8 offset-lg-1 offset-md-2">
                    <div class="row">
                        <!-- VIDEO SINGLE POST -->
                        <div class="col-lg-10 col-md-12 col-sm-12">
                            <!-- POST L size -->
                            <article class="post-video">
                                <!-- VIDEO INFO -->
                                <div class="video-info">
                                    <!-- 16:9 aspect ratio -->
                                    <div class="embed-responsive embed-responsive-16by9 video-embed-box">
                                        <iframe v-bind:src="video.video" class="embed-responsive-item"></iframe>
                                    </div>
                                    <!-- 收藏和点赞区域，移除点击事件 -->
                                    <div class="like-favorite-box">
                                        <i :class="{'fa-solid fa-bookmark': video.isFavorited, 'fa-regular fa-bookmark':!video.isFavorited}"></i>
                                        <span>{{video.favoriteCount}}</span>
                                        <i class="fa-regular fa-thumbs-up"></i>
                                        <span>{{video.likeCount}}</span>
                                    </div>
                                </div>
                                <div class="clearfix spacer"></div>
                                <!-- DETAILS -->
                                <div class="video-content">
                                    <h2 class="title main-head-title">视频描述</h2>
                                    <p v-cloak>{{video.info}}</p>
                                </div>
                                <!-- 评论模块 -->
                                <div class="comment-section">
                                    <h2>
                                        <span>评</span>
                                        <span>论</span>
                                        <div class="comment-input-wrapper">
                                            <input type="text" class="comment-input" v-model="newComment" placeholder="输入评论">
                                        </div>
                                        <button class="comment-btn" v-on:click="postComment">发表评论</button>
                                    </h2>
                                    <div v-for="(comment, index) in comments" :key="index">
                                        <p>{{comment.text}}</p>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- MODAL -->
        <div class="modal fade" id="enquirypopup" tabindex="-1" aria-labelledby="enquirypopupLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header custom-modal-header">
                        <h2 class="icon"><i class="fa fa-television" aria-hidden="true"></i>视频信息修改</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form name="info_form" class="form-inline" action="#" method="post">
                            <div class="form-group col-sm-12">
                                <label for="video-name">修改视频名称</label>
                                <input type="text" class="form-control" id="video-name" name="name" v-model="video.name"
                                    placeholder="输入视频名称">
                            </div>
                            <div class="form-group col-sm-12">
                                <label for="video-info">修改视频简介</label>
                                <input type="text" class="form-control" id="video-info" name="info" v-model="video.info"
                                    placeholder="请输入视频简介">
                            </div>
                            <div class="form-group col-sm-12 text-end">
                                <button class="subscribe-btn" title="Subscribe" v-on:click.prevent="update_video">
                                    上传提交
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入 Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#myapp',
            data: {
                author: "ZhangShuo",
                video: {
                    id: null,
                    name: '',
                    info: '',
                    video: '',
                    favoriteCount: 0,
                    likeCount: 0,
                    isFavorited: false
                },
                comments: [],
                newComment: ''
            },
            methods: {
                get_param: function (name) {
                    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
                },
                get_video: function () {
                    var id = this.get_param("id");
                    $.ajax({
                        url: "/video/" + id,
                        type: "get",
                        context: this,
                        success: function (result, status, xhr) {
                            // 映射后端返回的 like_count 和 collect_count 到前端的 likeCount 和 favoriteCount
                            this.video.id = result.id;
                            this.video.name = result.name;
                            this.video.info = result.info;
                            this.video.video = result.video;
                            this.video.favoriteCount = result.collect_count || 0;
                            this.video.likeCount = result.like_count || 0;
                            this.video.isFavorited = result.isFavorited || false;
                        },
                        error: function (xhr, status, error) {
                            console.error('获取视频数据失败:', error);
                        }
                    });
                    // 获取评论数据
                    $.ajax({
                        url: "/comments/" + id,
                        type: "get",
                        context: this,
                        success: function (commentResult, status, xhr) {
                            this.comments = commentResult.comments || [];
                        },
                        error: function (xhr, status, error) {
                            console.error('获取评论数据失败:', error);
                        }
                    });
                },
                update_video: function () {
                    $.ajax({
                        url: "/video/" + this.video.id,
                        type: "put",
                        data: JSON.stringify(this.video),
                        context: this,
                        success: function (result, status, xhr) {
                            alert("修改视频信息成功");
                            window.location.reload();
                        }
                    });
                },
                delete_video: function () {
                    $.ajax({
                        url: "/video/" + this.video.id,
                        type: "delete",
                        context: this,
                        success: function (result, status, xhr) {
                            alert("删除视频信息成功");
                            window.location.href = "/list.html";
                        }
                    });
                },
                postComment: function () {
                    if (this.newComment.trim()!== '') {
                        var id = this.get_param("id");
                        $.ajax({
                            url: "/comments/" + id,
                            type: "post",
                            data: JSON.stringify({ text: this.newComment }),
                            context: this,
                            success: function (result, status, xhr) {
                                this.comments.push({ text: this.newComment });
                                this.newComment = '';
                            },
                            error: function (xhr, status, error) {
                                console.error('发表评论失败:', error);
                            }
                        });
                    }
                }
            },
            mounted() {
                this.get_video();
            }
        });
    </script>
</body>

</html>